<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0px 14px;
  border-bottom: 1px solid #E3E3E5;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 200px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.calendar_container{
  width: 140px;
}
</style>

<section id="financial_analysis" style="margin:0 24px;">
  <hl-page-header title="财务分析"></hl-page-header>
  <div class="clearfix pb-20">
    <div class="head-container clearfix">
      <div class="clearfix">
        <div class="mes">
          <p>信息检索</p>
          <div class="global_search">
            <span class="icon-Gm-search"></span>
            <input
              v-model="customerName"
              autocomplete="off"
              type="text"
              class="global_ipt_text"
              placeholder="客户/合同名称"
              @keyup.enter="getData"
              style="width:240px"
             />
          </div>
        </div>

        <div class="flow">
          <p>付款截止日</p>
          <div class="dy-flex" style="align-items: center">
            <div class="calendar_container">
              <web-calendar v-model="beginDate" :afterdate="endDate"></web-calendar>
            </div>
            <span style="margin:0 10px">-</span>
            <div class="calendar_container">
              <web-calendar v-model="endDate" :beforedate="beginDate"></web-calendar>
            </div>
          </div>
        </div>

        <div class="flow" v-if="isExtenseFlag">
          <p>项目</p>
          <hl-select :data="projectList" v-model="projectId" width="140" @on-change="getGroupPrimaryData"></hl-select>
        </div>

        <div class="button-group pull-left" v-if="!isExtenseFlag">
          <hl-button @on-click="getData(1)" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="pull-left mt-10" v-if="isExtenseFlag">
        <div class="flow">
          <p>组合</p>
          <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
        </div>
        <div class="flow">
          <p>楼宇</p>
          <hl-select :data="buildingList" v-model="buildingId" width="140" @on-change="getbuildingId"></hl-select>
        </div>
        <div class="flow">
          <p>楼层</p>
          <hl-select :data="floorList" v-model="floorId" width="140" @on-change="getfloorId"></hl-select>
        </div>
        <div class="flow">
          <p>单元</p>
          <hl-select :data="unitList" v-model="unitId" width="140" @on-change="getunitId"></hl-select>
        </div>

        <div class="button-group pull-left">
          <hl-button @on-click="getData(1)" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="global_open_sign" @click="openSearch">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>
    </div>

    <div class="global_screening_container" style="padding:10px 0 20px">
      <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
      <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:266px;bottom:10px;"></span>
    </div>
  </div>

  <div id="bill-chart" style="width:800px;height:300px;margin:90px auto 20px;"></div>

</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/bill/scripts/financial_analysis.js" charset="utf-8"></script>
